﻿@page
@model IndexModel
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web 聊天室</title>
    <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
    <meta name="author" content="Vincent Garreau" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" media="screen" href="~/css/chat.css">
    <link href="~/css/layx/layx.min.css" rel="stylesheet" />
    <link href="~/lib/layui/css/layui.css" rel="stylesheet" />
    <link href="~/lib/layui/css/modules/layim/layim.css" rel="stylesheet" />
</head>
<body>
    前登录人： @(Model.LoginUser?.UserName)

    登录时间：  @(DateTime.Parse(User.FindFirst("LoginTime").Value).ToString(Model.yyyyMMddHHmmss))

    <div id="chat_main" style="display: none">
        <ul>
            <li>
                <h5 layim-event="spread" lay-type="undefined">
                    <i class="layui-icon"></i>
                    <span>在线好友</span><em>(<cite class="layim-count"> @(Model.OnlineUsers?.Count)</cite>)</em>
                </h5>
                <ul class="layui-layim-list ">
                    @foreach (var item in Model.OnlineUsers)
                    {
                        <li layim-event="chat" data-type="friend" data-index="2" class="layim-friend" onclick="openChatItem('@item.UserId','@item.UserName')">
                            <img src="~/imgs/qq.jpg" /><span>@item.UserName</span><p>代码改变世界</p><span class="layim-msg-status">new</span>
                        </li>
                    }
                </ul>
            </li>
        </ul>
    </div>

    <div id="chat_item" style="display: none">
        <div id="layui-layim-chat" class="layui-layer-content">
            <div class="layim-chat-box">
                <div class="layim-chat layim-chat-friend layui-show">
                    <div class="layim-chat-main" style="height:360px; background-color:#f5f5f5">
                        <ul id="chat_message_list"></ul>
                    </div>
                    <div class="layim-chat-footer">
                        <div class="layim-chat-textarea">
                            <textarea id="txtMessage"></textarea>
                        </div>
                        <div class="layim-chat-bottom">
                            <div class="layim-chat-send">
                                <span id="chat_close_chatitem" class="layim-send-close" layim-event="closeThisChat">关闭</span>
                                <span id="btnSenMessage" class="layim-send-btn" layim-event="send">发送</span>
                                <span class="layim-send-set" layim-event="setSend" lay-type="show"><em class="layui-edge"></em></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/signalr/dist/browser/signalr.js"></script>
    <script src="~/lib/layx/layx.min.js"></script>
    <script src="~/js/chat.js"></script>

    <script>

        var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
        layx.open({
            id: 'WebChatMain',
            title: 'Web 聊天-主窗口',
            content: document.getElementById('chat_main'),
            maxMenu: false,
            closeMenu: false,
            maxable: false,
            width: 300,
            position: "rc"
        });

        connection.start().then(function () {
            //document.getElementById("sendButton").disabled = false;
        }).catch(function (err) {
            return console.error(err.toString());
        });

        function openChatItem(id, name) {
            layx.open({
                id: id,
                title: name,
                content: document.getElementById('chat_item'),
                event: {
                    onload: {
                        before: function (layxWindow, winform) {

                        },
                        after: function (layxWindow, winform) {
                            $(layxWindow).find("#btnSenMessage").bind("click", function () {
                                if ($(layxWindow).find("#txtMessage").val().trim()) {
                                    connection.invoke("SendMessage", '@(Model.LoginUser?.UserName)', $(layxWindow).find("#txtMessage").val()).catch(function (err) {
                                        return console.error(err.toString());
                                    });
                                    $(layxWindow).find("#txtMessage").val('');
                                }
                            });

                            $(layxWindow).find("#chat_close_chatitem").bind("click", function () {
                                layx.destroy(id, "", true);
                            });

                            connection.on("ReceiveMessage", function (user, message, dateTime) {
                                var item = "";
                                if ('@(Model.LoginUser?.UserName)'== user) {
                                    item = `<li class="layim-chat-mine">
                                            <div class="layim-chat-user"><img src="/imgs/qq.jpg"><cite><i>${dateTime}</i>${user}</cite></div>
                                            <div class="layim-chat-text">${message}</div>
                                         </li>`;
                                }
                                else {
                                    item = `<li>
                                            <div class="layim-chat-user">
                                                <img src="/imgs/qq.jpg"><cite>${user}<i>${dateTime}</i></cite>
                                            </div>
                                            <div class="layim-chat-text">${message}</div>
                                        </li>`;
                                }
                                $(layxWindow).find("#chat_message_list").append(item);
                            });

                        }
                    }
                }
            });
        }

    </script>
</body>
</html>